<template>
  <div class="goods_order">
    <header>
      <el-form :model="searchForm">
        <el-form-item>
          <el-input v-model.trim="searchForm.record" @change="getShopOrderPage" clearable placeholder="订单编号/会员名称/手机号"></el-input>
        </el-form-item>

        <el-form-item>
          <el-input v-model.trim="searchForm.shopRecord" @change="getShopOrderPage" clearable placeholder="商家名称/商品名称"></el-input>
        </el-form-item>

        <el-form-item>
          <el-select v-model="searchForm.orderStatus" @change="getShopOrderPage" clearable placeholder="请选择商品状态">
            <el-option label="待支付" value="0"></el-option>
            <el-option label="已退款" value="4"></el-option>
            <el-option label="待核销" value="5"></el-option>
            <el-option label="已核销" value="6"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-date-picker
            v-model="orderTime"
            @change="changeDate"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="下单开始日期"
            end-placeholder="下单结束日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
    </header>

    <section>
      <el-table :data="tableData" border height="100%">
        <el-table-column label="订单编号" prop="id" align="center"></el-table-column>
        <el-table-column label="图片" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.fileUrl" style="width: 100%;">
          </template>
        </el-table-column>
        <el-table-column label="商品名称" prop="goodsName" align="center"></el-table-column>
        <el-table-column label="所属商户" prop="shopName" align="center"></el-table-column>
        <el-table-column label="订单金额(元)" prop="paidAmount" align="center"></el-table-column>
        <el-table-column label="数量" prop="quantity" align="center"></el-table-column>
        <el-table-column label="下单人" prop="nickname" align="center"></el-table-column>
        <el-table-column label="联系电话" prop="mobilePhone" align="center"></el-table-column>
        <el-table-column label="下单时间" prop="payTime" align="center"></el-table-column>
        <el-table-column label="状态" prop="payStatus" align="center">
          <template slot-scope="scope">
            {{scope.row.payStatus | statusFilter}}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="detailsShow = true,row = scope.row">详情</el-button>
          </template>
        </el-table-column>
      </el-table>

    </section>

    <footer>
      <el-pagination
        :current-page="searchForm.currentPage"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="searchForm.pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        align="center"
        style="margin-top: 14px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </footer>

    <el-dialog title="订单详情" :visible.sync="detailsShow" width="520px" :close-on-click-modal="false" :close-on-press-escape="false" :append-to-body="true">
      <goodsDetails v-if="detailsShow" :row="row" @closeDialog="detailsShow=false" @refresh="getShopOrderPage" />
    </el-dialog>

  </div>
</template>

<script>
  import goodsDetails from './goodsDetails.vue'

  export default {
    components: { goodsDetails },
    filters: {
      statusFilter(type) {
        switch(type) {
          case 0:
            return '待支付'
          case 1:
            return '已支付'
          case 2:
            return '取消支付'
          case 3:
            return '支付失败'
          case 4:
            return '已退款'
          case 5:
            return '待核销'
          case 6:
            return '已核销'
        }
      }
    },
    data() {
      return {
        orderTime: null,
        searchForm: {
          currentPage: 1,
          pageSize: 10
        },
        total: 10,
        tableData: [],
        detailsShow: false
      }
    },

    mounted() {
      this.getShopOrderPage();
    },

    methods: {
      getShopOrderPage() {
        this.$axios({
          method: 'get',
          url: '/shop/shop-order/page',
          params: this.searchForm
        }).then((res) => {
          if(res.code == 200) {
            this.tableData = res.data.records;
          }
        })
      },

      changeDate(e) {
        this.searchForm.beginTime = e[0];
        this.searchForm.endTime = e[1];
        this.getShopOrderPage();
      },



      // 分页修改每页显示条数
      handleSizeChange(val) {
        this.searchForm.pageSize = val;
        // this.getTableData();
      },
      // 分页跳转页面
      handleCurrentChange(val) {
        this.searchForm.currentPage = val;
        // this.getTableData();
      },
    }
  }
</script>

<style scoped>
  .goods_order {
    height: calc(100vh - 158px);
    padding: 10px;
  }

  header {
    height: 50px;
    position: relative;
  }

  section {
    height: calc(100% - 100px);
  }

  footer {
    height: 50px;
  }

  .el-form-item {
    display: inline-block;
    margin-right: 10px;
  }

  .el-input {
    width: 200px;
  }




</style>
